<template>
	<view class="page">
		<block v-if="emptyText==''">
			<view class="article_top">
				<view class="article_top_title twolist-hidden">{{ infomation.title }}</view>
				<view class="article_top_time">{{infomation.createtime?setTime(infomation.createtime):'' }}   {{infomation.author}}</view>
			</view>
			<view class="m_l_48 m_r_48">
				<jyf-parser :html="infomation.content" :domain="domain" lazy-load ref="article" selectable show-with-animation use-anchor @error="error" @imgtap="imgtap" @linkpress="linkpress" @parse="parse" @ready="ready">
					加载中...
				</jyf-parser>
			</view>
			<view class="look_num">
				<text class="navy_blue">{{infomation.reading}}</text>
				<text class="f-c-9">浏览</text>
			</view>
			<view class="article_list" v-if="other.length>0">
				<view class="article_list_top dis-flex flex-x-between">
					<view class="list_title navy_blue">推荐资讯</view>
					<view class="get_more dis-flex flex-y-center" @click="bindToAnnouncement">
						<text class="f_26 navy_blue">更多</text>
						<image :src="imgPrefix('/static/image/icon/next.png')"></image>
					</view>
				</view>
				<notice-list :list="other" @bind-notice-view="bindArticleDetail"></notice-list>
			</view>
		</block>
	<page-empty v-else :emptyText="emptyText" :paddingTop="statusBarHeight+70+'px'" @comEmptyBtn="bindEmptyBtn"></page-empty>
	</view>
</template>

<script>
import noticeList from '@/components/notice-list/index.vue'; // 文章列表组件
import jyfParser from '@/components/jyf-parser/jyf-parser';
import { commonMixinFun } from '@/static/mixins/common.js';

import { pageEmpty } from '@/static/mixins/pageEmpty.js';
import { changeFormat } from '@/static/mixins/changeFormat.js';
import API from '@/static/api/index.js';
import { toPage } from '@/static/uitls/common.js';
const app = getApp();
export default {
	mixins: [commonMixinFun,changeFormat,pageEmpty],
	components: {
		jyfParser,
		noticeList
	},
	data() {
		return {
			id:'',
			infomation: {},
			domain: app.globalData.BASE_URL, //主域名，设置后将对于图片地址将自动拼接主域名或协议名
			other: [],
			index:0,
			list:[]
		};
	},
	onLoad(option) {
		app._log("option",option)
		if(!option.hasOwnProperty('id')){
			this.pageTo('',{},'back')
		}else{
			this.id=option.id
			this.getTInfomationDetail()
			// 点击咨询
			this.index=option.index;
			if(option.hasOwnProperty('list')){
				this.list=JSON.parse(decodeURIComponent(option.list))
			}
		}
		app._log(option)
	},
	methods: {
		parse(e) {
			app._log('parse finish', e);
		},
		ready(e) {
			app._log('ready', e);
			// app._log('api: getText', this.$refs.article.getText());
			app._log('imgList', this.$refs.article.imgList);
		},
		imgtap(e) {
			app._log('点击图片', e);
		},
		linkpress(e) {
			app._log('复制链接', e);
		},
		error(e) {
			console.error(e);
		},
		// 点击文章
		bindArticleDetail(i) {
			app._log('点击了第',i)
			let {list,index,other}=this
			this.pageTo('/pages/teacher/article_details/index',{id:other[i].infomation_id,index:index,list:JSON.stringify(list)})
		},
		getTInfomationDetail(){
			API.getTInfomationDetail(this.id).then(res=>{
				app._log(res)
				if(res.code==1){
					this.infomation = res.data.infomation
					this.other = res.data.other
				}else{
					this.emptyText = '当前资讯已丢失'
				}
			}).catch(err=>{
				this.emptyText = err.msg||'网络加载失败，白小可很无奈'
			});
		},
		bindToAnnouncement(){
			app._log('更多资讯')
			this.pageTo('/pages/teacher/information_list/index',{index:this.index,list:JSON.stringify(this.list)})
		}
	}
};
</script>

<style lang="scss">
.page{
	background-color: #fff;
}
.article_{
	&top{
		padding: 24rpx;
		.article_top{
			&_title{
				font-size: 36rpx;
				color: #252748;padding-bottom: 24rpx;
			}
			&_time{
				font-size: 24rpx;
				line-height: 34rpx;
				color: #8f8f9a;
			}
		}
	}
	&share {
		padding: 32rpx 286rpx;
		background-color: #f8f8f8;
		&_btn{
			width: 176rpx;
			height: 76rpx;
			background-color: rgba(127, 74, 255, 0.08);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
					width: 44rpx;
					height: 44rpx;
				}
			text{
					font-size: 32rpx;
					color: #7f4aff;
				}
		}
	}
	&list{
		&_top{
			padding: 32rpx 48rpx 0;
			.get_more{
				image{
					width: 24rpx;
					height: 24rpx;
					margin-right: 2rpx;
				}
			}
		}
		
	}
	
}
.look_num{
	padding: 24rpx 48rpx;
}
</style>
